import React, {Component, PropTypes} from 'react';
import ReactDOM from 'react-dom';
import { Router, Link,browserHistory } from 'react-router';
import api from '../api';
import { Menu, Icon, Switch,Layout } from 'antd';
import {TOP_TAB} from '../constants/index';
const SubMenu = Menu.SubMenu;
const MenuItemGroup = Menu.ItemGroup;
const { Header, Sider, Content,Footer } = Layout;


import 'navgation.scss';

let AUTH = {
  1:['authority','user','loan','operation','protocol','generalize','logout'],
  2:['loan','operation','logout'],
  3:['generalize','logout'],
  4:['generalize','logout'],
  5:['operation','logout']
}

export default class Navigation extends React.Component {
    constructor(props, context){
        super(props, context);
        this.state = {
          session:{},
        };
    }
    componentWillMount() {
       // this.checkLogin();
    }

    componentWillReceiveProps(nextProps){
      // this.checkLogin();
    }


    logout(){
      location.href="/logout";
    }

    isActive(path){
      if(!location.pathname.includes(path)){
          return "";
      }
      return " ant-menu-item-selected";

    }

    handleClick(e){
      if(e.key=='/logout'){
        location.href="/logout";
        return
      }
      this.setState({
      })
      browserHistory.push({pathname:e.key});
    }


     menuItem({key,url,name,children}){
      let {session} = this.state;
      let {userPassport={},employee={}} =  session;
      let authstr = AUTH[employee.roleNumber];
      // if(!authstr){
      //   return
      // }
      // if(!authstr.includes(key)){
      //   return
      // }
      if(children){
          return (
            <SubMenu key={key}   title={<span>{name}</span>}>
              {children.map((item,i) =>{
                if(employee.roleNumber == 5 ){
                  if(item.url=='/operation/kefu/list'){
                    return <Menu.Item key={item.url}>{item.name}</Menu.Item>
                  }
                }else{
                  return <Menu.Item key={item.url}>{item.name}</Menu.Item>
                }

              })}
            </SubMenu>
          )
      }

      return (
        <Menu.Item key={url} style={{paddingLeft:'30px'}} >
          <span>
              <span>{name}</span>
          </span>
        </Menu.Item>
      )
    }


    async checkLogin(){
      let session = await api('/authority/check/login');

    }


    showMenuItem(current){
      switch(current) {
        case TOP_TAB[0]:
          return(
            <Menu
              theme={'dark'}
              onSelect={this.handleClick.bind(this)}
              defaultOpenKeys={['sub1']}
              selectedKeys={[location.pathname]}
              mode="inline"
            >
              {this.menuItem({
                    name:'待入资产池',
                    key:'waitingIn',
                    url:'/underlyingAssets/waitingIn/list'
                  })}
              {this.menuItem({
                    name:'待赎回资产',
                    key:'waitingRedeem',
                    url:'/underlyingAssets/waitingRedeem/list'

                  })}
              {this.menuItem({
                    name:'待回购资产',
                    key:'waitingBuyBack',
                    url:'/underlyingAssets/waitingBuyback/list'

                  })}
              {this.menuItem({
                    name:'当期资产池',
                    key:'currentPhase',
                    url:'/underlyingAssets/currentPhase/list'

                  })}
              {this.menuItem({
                    name:'资产池记录',
                    key:'propertyRecord',
                    url:'/underlyingAssets/propertyRecord/list'

                  })}
              </Menu>
            )
          break;
        case TOP_TAB[1]:
          return(
            <Menu
              theme={'dark'}
              onSelect={this.handleClick.bind(this)}
              defaultOpenKeys={['sub1']}
              selectedKeys={[location.pathname]}
              mode="inline"
            >
              {this.menuItem({
                    name:'资产数据',
                    key:'redeemData',
                    url:'/propertyData/propertyData/list'

                  })}
              {this.menuItem({
                    name:'循环购买',
                    key:'circleBuying',
                    url:'/propertyData/circleBuying/list'

                  })}
              {this.menuItem({
                    name:'资产报告',
                    key:'redeemReport',
                    url:'/propertyData/redeemReport/list'

                  })}
            </Menu>
            )
          break;
        case TOP_TAB[2]:
          return(
            <Menu
              theme={'dark'}
              onSelect={this.handleClick.bind(this)}
              defaultOpenKeys={['sub1']}
              selectedKeys={[location.pathname]}
              mode="inline"
            >
              {this.menuItem({
                    name:'账务公司',
                    key:'financeCompany',
                    url:'/systemManage/financeCompany/list',

                  })}
              {this.menuItem({
                    name:'企业客户',
                    key:'companyCustom',
                    url:'/systemManage/companyCustom/list',
                  })}
              {this.menuItem({
                    name:'账户管理',
                    key:'accountManage',
                    url:'/systemManage/accountManage/list',
                  })}
            </Menu>
          )
          break;
      }
    }

    render(){
      var {session,collapsed} = this.state;
      let {userPassport={},employee={}} =  session;
      var {currentTab,children} = this.props;
      return (
          <div className="layout">
            <Sider
              className="navgation" style={{height:'100vh',overflow:'auto'}}>
              {this.showMenuItem(currentTab)}
            </Sider>
            <div className="wrapper-content">
            {children}
            <div className='footer'>
              由 云简(北京)网络科技有限公司 提供技术支持
            </div>
          </div> 
        </div>
        )


      }




    
}
